<template>
  <div>
   <div class="personMain">
     <div class="personMsg">
       <div class="personItem">
         <h3>个人信息</h3>
         <div class="changeImg">
           <i class="el-icon-camera" ></i>
           点击改变图片
         </div>
         <img src="../../../public/image/bg2.jpg" alt="">
         <span>姓名：{{user}}</span>
          <el-tag size="small">{{role}}</el-tag>
       </div>
       <div class="personItem">
         <h3>  住房信息</h3>
         <span>小区：</span>
         <span>A栋23</span>
         <span>门牌号:</span>
         <span>415</span>
         <span>房号类型：</span>
         <h4>总统套房公寓</h4>
         <span>面积:597m'</span>

         <p>房型简介：</p>
         <span>顶级配置标准，总统级套房礼遇。</span>
       </div>
        <div class="personItem">
          <h2>我的车型</h2>
          <div class="carDec">
          <div class="carLeft">
            <div class="carLeftItem">
              <span>车型名称：</span>
              <span>法拉利Roma</span>
            </div>
             <div class="carLeftItem">
              <span>车牌号：</span>
              <span>闽A13126</span>
            </div>
             <div class="carLeftItem">
              <span>登记时间：</span>
              <span>2022-04-29</span>
            </div>
          </div>
          <div class="carRight">
          <img :src="imagecar" alt="">
          </div>
          </div>
     
        </div>
        <div class="personItem">
          <h1>住房情况：</h1>
          <span>客厅：<i>高级A式</i></span>
           <div class="image image1">
             <div class="img">
               <p></p>
               <span>点击查看详情</span>
               <p></p>
             </div>
 <img src="../../../public/image/home.jpg" alt="">
           </div>
         
           
          <span>餐厅：<i>高级A式</i></span>
          <div class="image image2">
              <div class="img">
                 <p></p>
               <span>点击查看详情</span>
               <p></p>
              </div>
          <img src="../../../public/image/home2.jpg" alt="">
          </div>
        </div>

     </div>
   </div>
  </div>
</template>
<script>
import imagecar from '../../../public/image/car.png'
import {mapState}  from 'vuex'
export default {
  created() {
    this.getuser()
  },
  data() {
    return {
      role:'',
      imagecar:imagecar
    }
  },
  methods: {
    async  getuser(){
       const {data:res}= await this.$http.get('/users//role/'+this.user)
       this.role=res.result.role
     }
  },
    computed:{
    ...mapState([
      'user',
      'password',
      'time'
    ])
  },
}
</script>
<style lang="less">
@keyframes setP {
  from{
    width: 80%;
  }
  to{
    width: 10%;
  }
}
@keyframes scaleImg {
  form{
    transform: scale(1);
  }
  to{
    transform: scale(1.2,1.1);
  }
}
.personMain{
  width: 100%;
 display: flex;
 justify-content: center;

padding: 1vw;

  .personMsg{

    margin-top: 10px;
    width: 80%;
    
    display: grid;
  grid-template-columns: 25vw 25vw 25vw;
  grid-template-rows: 25vw 25vw 25vw;
   grid-auto-flow: column dense;
  grid-gap :10px;
  .personItem{

    background: white;
    border-radius: 15px;

    &:nth-child(1){
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    img{  
      width: 12vw;
      height: 12vw;
      border-radius: 50%;    
    }
    &:hover {
       .changeImg{
         display: flex;
       }
      
     }
   .changeImg{
     width: 12vw;
     height: 12vw;
     border-radius: 50%;
     position: absolute;
     background: black;
     transform: translateY(-8%);
     opacity: .7;
     z-index: 10;
     display: none;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     color: white;
     transition: all 0.5s;
     &:hover {
       font-size: 20px;
      
     }
   }
    
      *{
        margin: 4px 0;
      }
    }
    &:nth-child(2){
       grid-row-start: 2;
       grid-row-end: 4; 
     
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       font-size: 30px;
       h3{
   
         margin-bottom: 30px;
       }
       span{
         color:gold;
        font-family: "KaiTi";
        &:nth-child(2n-1){
          margin-bottom: 30px;
          color: black;
          font-family: "NSimSun";
        }
       }
       p{
         font-family: "KaiTi";
         margin-top: 30px;
         font-size:28px;
         &+span{
           font-size: 18px;
         }
       }
  
    }
     &:nth-child(3){
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       padding:0 5vw ;
          grid-column-start: 2;
       grid-column-end: 4; 
  
       .carDec{
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
        
              .carLeft{
                 width: 60%;
         .carLeftItem{
           display: flex;
           padding: 0 20px;
           
           align-items: center;
           margin: 20px 0;
           span{
             &:nth-child(1){
               font-size: 28px;
               font-weight: 100;
             }
             &:nth-child(2){
               color: gold;
               font-size: 25px;
                font-family: "KaiTi";
             }
           }
         }
       }
         .carRight{
           width: 40%;
          
           img{
             width: 100%;
           }
         }
       }
     }
     &:nth-child(4){
       position: relative;
       display: flex;
       align-items: center;
       flex-direction: column;
       padding: 1vw;
         grid-column-start: 2;
       grid-column-end: 4; 
        grid-row-start: 2;
       grid-row-end: 4; 
       *{
         margin-bottom: 5px;
       }
  
       span{
         i{
           font-family: "KaiTi";
           color: gold;
         }
       }
       .image{
         position: relative;
         width: 80%;
         height: 40vh;
         overflow: hidden;
         .img{
           width: 100%;
           position: absolute;
           height: 100%;
           background: black;
           display: none;
           justify-content: center;
           flex-direction: column;
           align-items: center;
           opacity: .7;
           color: white;
           p{
             width: 80%;
             border-bottom: 2px solid white;
             transition: all 0.5s;
           }
         }
          img{
         width: 100%;
         
       }
       &:hover{
        
          .img{
            display: flex;
            z-index: 10;
            p{
               animation:setP 1s ;
              width: 10%;
             
             
            }
          }
           img{
            animation: scaleImg 2s ;
           transform: scaleX(1.2,1.1);
         }
       }
       }
      
       
     }
  }
  }
}
</style>